<!-- 意见反馈 -->
<template>
    <el-card class="card-bottom">
        <FormTable :parameter="parameter" :formList="formList" @onquery="onquery" @onReset="onReset"></FormTable>
    </el-card>
    <el-card>
        <el-descriptions title="意见反馈列表">
        </el-descriptions>
        <PageTable ref="tableRef" :column="column" :parameter="parameter" :query="GetFeedbackListApi">
            <template #content="{ row }">
                <div class="content">{{ row.content }}</div>
            </template>
            <template #classify="{ row }">
                {{ classifyType[row.classify] }}
            </template>
            <template #action="{ row }">
                <el-button @click="check(row)">查看</el-button>
            </template>
        </PageTable>
    </el-card>
    <!-- 添加弹窗 -->
    <el-dialog v-model="AddDialog" title="查看" width="25%" :before-close="handleClose">
        <el-descriptions :column="1">
            <el-descriptions-item label="用户昵称">{{ formLabelAlign.username }}</el-descriptions-item>
            <el-descriptions-item label="联系方式">{{ formLabelAlign.phoneNumber }}</el-descriptions-item>
            <el-descriptions-item label="问题分类">{{ classifyType[formLabelAlign.classify] }}</el-descriptions-item>
            <el-descriptions-item label="详细描述">{{ formLabelAlign.content }}</el-descriptions-item>
            <el-descriptions-item label="图片">
                <div class="img">
                    <el-image v-for="(item, index) in formLabelAlign.images" :key="index"
                        :preview-src-list="[formLabelAlign.images]" :preview-teleported="true"
                        style="width: 148px; height: 148px" :src="item" fit="fill" />
                </div>
            </el-descriptions-item>
        </el-descriptions>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">关闭</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>

import { reactive, ref, defineComponent } from "vue";
import FormTable from '@/components/FormTable'
import PageTable from '@/components/PageTable'
import { ElMessage } from 'element-plus'
import { GetFeedbackListApi } from "@/api/Feedback";


defineComponent({
    components: {
        FormTable,
        PageTable
    }
})

const classifyType = {
    1: '优化建议',
    2: '商品相关',
    3: '合作加盟',
    4: '其他',
}
const AddDialog = ref(false)
//弹窗form
const formLabelAlign = ref({
    username: null,
    phoneNumber: null,
    content: null,
    classify: null,
    images: []
})

const parameter = reactive({
    username: null,
    phoneNumber: null,
    classify: null
})

const formList = ref([
    {
        type: 'input',
        label: '申请人昵称',
        code: 'username',
    },
    {
        type: 'input',
        label: '联系方式',
        code: 'phoneNumber',
    },
    {
        type: 'select',
        label: '反馈类型',
        options: [
            { label: '优化建议', value: 1 },
            { label: '商品相关', value: 2 },
            { label: '合作加盟', value: 3 },
            { label: '其他', value: 4 },
        ],
        code: 'classify',
    },
])
const column = [
    { label: '会员昵称', prop: 'username' },
    { label: '联系方式', prop: 'phoneNumber' },
    { label: '反馈内容', slots: 'content' },
    { label: '类型', slots: 'classify' },
    { label: '创建时间', prop: 'createTime' },
    { label: '操作', slots: 'action' },
]

// 搜索条件查询
const tableRef = ref()
function onquery() {
    tableRef.value.refresh()

}
function onReset() {
    parameter.username = null
    parameter.phoneNumber = null
    parameter.classify = null
    tableRef.value.refresh(true)
}

function check(row) {
    formLabelAlign.value = row
    AddDialog.value = true
}

//弹窗关闭
function handleClose() {
    AddDialog.value = false
    formLabelAlign.value = {
        username: null,
        phoneNumber: null,
        content: null,
        classify: null,
        images: []
    }
    tableRef.value.refresh()

}



</script>

<style scoped lang="scss">
.balanceType {
    width: 44px;
    height: 24px;
    border-radius: 4px;
    text-align: center;
    line-height: 24px;
}

.img {
    margin: -20px 0 0 72px;
}

.content {
    width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>